<template>
	<div class="login" :class="fontFamily">
		<div class="login-warp" :class="device=='desktop' ? 'desktop' : 'mobile'">
			<div class="title" style="font-size: 30px;margin: 0 0 20px;">注册</div>
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" class="demo-ruleForm">
				<el-form-item prop="loginName">
					<el-input prefix-icon="el-icon-user" v-model="ruleForm.loginName" :size="size" placeholder="请输入登录名"></el-input>
				</el-form-item>
				<el-form-item prop="userName">
					<el-input prefix-icon="el-icon-user" v-model="ruleForm.userName" :size="size" placeholder="请输入用户名"></el-input>
				</el-form-item>
				<el-form-item prop="phone">
					<el-input prefix-icon="el-icon-user" v-model="ruleForm.phone" :size="size" placeholder="请输入手机号"></el-input>
				</el-form-item>
				<el-form-item  prop="password">
					<el-input :type="passwordType" prefix-icon="el-icon-lock" v-model="ruleForm.password" :size="size" placeholder="请输入密码">
						<i class="lz-icon" :class="passwordType=='password' ? 'el-icon-turn-off':'el-icon-open'" slot="suffix" @click="handleIconClick"></i>
					</el-input>
				</el-form-item>
				<el-form-item>
				    <el-button type="primary" @click="submitForm()" :size="size" style="width: 60%;">注册</el-button>
				</el-form-item>
				<el-form-item>
					<router-link to="/Login">
						<el-link :underline="false" type="warning">登录</el-link>
					</router-link>
				</el-form-item>
			</el-form>
		</div>
	</div>
</template>

<script>
	const {
		body
	} = document
	const WIDTH = 992
	import {
		mapGetters
	} from 'vuex'
	export default {
		computed: {
			...mapGetters(['size','fontFamily'])
		},
		name: "Register",
		data() {
			return {
				device: 'desktop', //当前为pc
				passwordType:'password',//是否显示密码
				ruleForm: {
					loginName: '', //登录名
					userName:'',//用户名
					phone:'',//手机号
					password:'',//密码
				},
				rules: {
					loginName: {
						required: true,
						message: '请输入登录名',
						trigger: 'blur'
					},
					userName: {
						required: true,
						message: '请输入用户名',
						trigger: 'blur'
					},
					phone: {
						required: true,
						message: '请输入手机号码',
						trigger: 'blur'
					},
					password:{
						required: true,
						message: '请输入密码',
						trigger: 'blur'
					}
				}
			}
		},
		mounted() {
			console.log(this.size);
			this.$_resizeHandler()
			window.addEventListener('resize', this.$_resizeHandler)
		},
		methods: {
			handleIconClick(){
				if(this.passwordType=='password'){
					this.passwordType='text'
				}else{
					this.passwordType='password'
				}
			},
			//登录提交
			submitForm(){
				
			},
			
			$_isMobile() {
				const rect = body.getBoundingClientRect()
				return rect.width - 1 < WIDTH
			},
			$_resizeHandler() {
				if (!document.hidden) {
					const isMobile = this.$_isMobile()
					if (isMobile) {
						this.device = 'mobile'
					} else {
						this.device = 'desktop'
					}
				}
			}
		}
	}
</script>

<style scoped="scoped" lang="scss">
	@import '../Login/login.scss';
</style>
